<template>
  <div class="chaperone">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">约伴</span>
    </div>
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <!-- 约伴列表 -->
        <div class="empty" v-if="chaperoneList.length == 0">
          <div class="empty-pic">
            <img src="@/assets/head/W7.png" alt="" />
          </div>
          <div class="text">快来发起第一个约伴吧</div>
        </div>
        <div class="chaperone-list" v-else>
          <ChaperoneItem
            v-for="(ch, index) in chaperoneList"
            :key="index"
            :head_url="ch.send_user && ch.send_user.avatar"
            :nick_name="ch.send_user.name"
            :release_time="ch.timestamp"
            :address="(ch.business && ch.business.city + ch.business.name) || ''"
            :content="ch.content"
            :count="ch.feed && ch.feed.likes"
            :end_time="ch.feed && ch.feed.time"
            :text="ch.feed && ch.feed.reason_text"
            :title="ch.feed && ch.feed.tiny_title"
            :feed_url="ch.feed.covers && ch.feed.covers[0].url"
            :sex_type="ch.sex_type ? ch.sex_type : 0"
            :invitation_time="ch.invitation_time ? ch.invitation_time : 0"
            :fee_type="ch.fee_type ? ch.fee_type : 0"
            :like_count="ch.like_count"
            :person_count_type="ch.person_count_type ? 2 : 1"
            :id="ch.feed.id"
            :user_id="ch.send_user && ch.send_user.id"
            :bus_id="ch.business && ch.business.id"
          ></ChaperoneItem>
        </div>
        <!-- 去约伴广场 -->
        <div class="go-square" @click="$router.push('/chaperonesquare')">
          <span class="text">去约伴广场</span>
        </div>
        <div class="send-chaperone">
          <div class="msg">
            <input type="text" v-model="value" placeholder="简单介绍自己，并说说你的约伴要求吧" />
          </div>
          <div class="submit" @click="submit">发起约伴</div>
        </div>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import RefreshList from '../activity/public-component/RefreshList.vue'
import ChaperoneItem from './ChaperoneItem.vue'
import axios from '@/utils/request'

export default {
  components: {
    RefreshList,
    ChaperoneItem
  },
  props: ['id'],
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      value: '',
      page: 1, // 控制翻页
      chaperoneList: []
    }
  },
  methods: {
    // 请求约伴数据
    async requestChaperoneData() {
      /*
      请求地址：https://api.xmonster.cn/v2/invitations
      请求方式：get
      请求参数：
      params：{
        feed_id：当前活动的id
        page: 1
      }
      */
      const data = await axios.get('/v2/invitations', {
        params: {
          page: this.page,
          feed_id: this.id
        }
      })
      if (data.length > 0) {
        this.page++
        this.status.loading = false
        this.status.finished = false
        this.chaperoneList = [...this.chaperoneList, ...data]
      } else {
        this.status.finished = true
      }
    },
    // 发起约伴
    submit() {
      if (this.value.length < 15) {
        this.$toast({
          message: '长度不低于15'
        })
      } else {
        /*
        请求地址：https://api.xmonster.cn/v2/user/invitations
        请求方式：post
        请求参数：
        data:
          {
            "feed":{
              "id":6364,
              "liked":false,
              "covers":[],
              "price1":0.0,
              "price2":0.0,
              "is_go_show":0,
              "followers":0,
              "sub_categories":[],
              "sub_category":"",
              "order":0,
              "type":1,
              "feed_type":0,
              "price_type":0,
              "action_type_2":0,
              "action_enabled":false,
              "likes":0,
              "like_avatars":[],
              "f_show_privilege":0,
              "has_ambassador":false,
              "notice_items":[],
              "notices":[],
              "banner_type":0,
              "child_feeds":[],
              "child_count":0,
              "banners":[],
              "invitation_count":0,
              "article_post_count":0,
              "post_count":0,
              "video_post_count":0,
              "pic_count":0,
              "coupons":[],
              "checkin_count":0,
              "is_checkin_activity":false,
              "oos_register_enabled":false,
              "view_count":0,
              "jump_actions":[],
              "post_covers":[],
              "remain_seconds":0,
              "show_open_card_banner":false
            },
            "content":"有没有元旦节一起的小姐姐啊，AA，多少人都可以",
            "liked":false,
            "like_count":0,
            "timestamp":0,
            "id":0,
            "invitation_time":0,
            "fee_type":0,
            "person_count_type":0,
            "sex_type":0
          }
        */
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.chaperoneList = []
      await this.requestChaperoneData()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestChaperoneData()
      this.status.loading = false
    }
  },
  async created() {
    const Toast = this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中...'
    })
    try {
      await this.requestChaperoneData()
    } catch {
      Toast.clear()
      this.$toast.fail('请检查网络！')
    } finally {
      Toast.clear()
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.chaperone {
  padding: 46px 10px 50px;
  min-height: 100vh;
  background-color: #f5f5f5;

  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      margin-left: 10px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close {
      height: 30px;
      width: 30px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        transform: rotate(180deg);
        height: 20px;
        width: 20px;
      }
    }
  }
  .chaperone-list {
    padding: 5px 0;
  }

  .go-square {
    padding: 30px 0;
    text-align: center;

    .text {
      font-size: 14px;
      padding: 10px 20px;
      color: #cecece;
      font-weight: 500;
      background-color: #fff;
      border: 1px solid #cecece;
      border-radius: 8px;
      box-shadow: 0 5px 10px #cecece;
    }
  }
  .send-chaperone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    border-top: 1px solid #e1e1e1;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;

    .msg {
      height: 30px;
      width: 70%;
      padding: 3px;
      border: 1px solid #c1c1c1;

      input {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        font-size: 12px;
        margin: 0;
        padding: 0;
      }
    }
    .submit {
      flex: 1;
      margin-left: 5px;
      background-color: #d94648;
      border-radius: 5px;
      color: #fff;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
    }
  }
  .empty {
    height: 100px;
    width: 100%;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .empty-pic {
      width: 120px;
      img {
        height: auto;
        width: 100%;
      }
    }
    .text {
      font-size: 14px;
      color: #bebebe;
      padding: 10px;
      margin-top: 5px;
    }
  }
}
</style>
